<!--
 * @Author: your name
 * @Date: 2021-04-08 08:57:39
 * @LastEditTime: 2021-05-19 17:34:08
 * @LastEditors: Please set LastEditors
 * @Description: 饼状图
 * @FilePath: /medicine-web/src/components/Charts/PieChart.vue
-->
<template>
  <div class="pie-container">
    <div :id="elementId" style="height: 360px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'pieChart',
  data () {
    return {}
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var myChart = echarts.init(document.getElementById(this.elementId))
      myChart.setOption({
        title: {
          text: this.chartTitle,
          textStyle: {
            color: '#555555',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: [
          {
            type: 'scroll',
            icon: 'bar',
            data: this.getLegend(this.outterData),
            right: '10%',
            top: '20%',
            orient: 'vertical',
            formatter: function(label){
        　　　　return label.length > 4 ? label.substr(0,4) + '...' : label
          　},
            textStyle: {
              color: '#555555',
              width: 20
            }
          },
          {
            type: 'scroll',
            icon: 'bar',
            data: this.getLegend(this.innerData),
            right: '30%',
            top: '20%',
            orient: 'vertical',
            formatter: function(label){
        　　　　return label.length > 4 ? label.substr(0,4) + '...' : label
          　},
            textStyle: {
              width: 20,
              color: '#555555'
            }
          }
        ],
        // 文字显示
        graphic: {
          elements: [
            {
              type: 'text',
              left: '27%',
              top: '41%',
              style: {
                text: '溶瘤病毒',
                fill: '#6F6F6F',
                font: '1em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            },
            {
              type: 'text',
              left: '29%',
              top: '49%',
              style: {
                text: 'VS',
                fill: '#6F6F6F',
                font: '1em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            },
            {
              type: 'text',
              left: '27%',
              top: '57%',
              style: {
                text: '肿瘤类型',
                fill: '#6F6F6F',
                font: '1em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            },
            // {
            //   type: 'text',
            //   left: '27%',
            //   top: '53%',
            //   style: {
            //     text: this.getTotal(),
            //     fill: '#6F6F6F',
            //     font: '1em "Microsoft YaHei", sans-serif',
            //     textAlign: 'center'
            //   }
            // },
            // {
            //   type: 'text',
            //   left: '26%',
            //   top: '60%',
            //   style: {
            //     text: `总占比${this.getOccupy()}%`,
            //     fill: '#6F6F6F',
            //     font: '1em "Microsoft YaHei", sans-serif',
            //     textAlign: 'center'
            //   }
            // },
            {
              type: 'text',
              right: '40px',
              top: '5px',
              style: {
                fill: '#555555',
                text: '单位__条',
                font: '0.875em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            },
            { // 溶瘤病毒
              type: 'text',
              right: '37%',
              top: '15%',
              style: {
                fill: '#555555',
                text: '溶瘤病毒',
                font: '0.875em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            },
            { // 肿瘤类型
              type: 'text',
              right: '16%',
              top: '15%',
              style: {
                fill: '#555555',
                text: '肿瘤类型',
                font: '0.875em "Microsoft YaHei", sans-serif',
                textAlign: 'center'
              }
            }
          ]
        },
        series: [
          {
            name: '溶瘤病毒',
            type: 'pie',
            radius: ['55%', '65%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.innerData,
            itemStyle: {
              borderRadius: 3
            }
          },
          {
            name: '肿瘤类型',
            type: 'pie',
            radius: ['75%', '85%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.outterData,
            itemStyle: {
              borderRadius: 3
            }
          }
        ]
      })
    },
    getLegend (rawData) {
      return rawData.map(item => item.name)
    },
    getTotal () {
      let count = 0
      for (const item of this.outterData) {
        count += item.value
      }
      for (const item of this.innerData) {
        count += item.value
      }
      return count
    },
    getOccupy () {
      let count1 = 0
      let count2 = 0
      for (const item of this.outterData) {
        count1 += item.value
      }
      for (const item of this.innerData) {
        count2 += item.value
      }
      return parseInt((count2 / count1) * 100)
    }
  },
  watch: {
    outterData (val, old) {
      this.initChart()
    }
  },
  props: {
    elementId: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: String,
      default: ''
    },
    outterData: {
      type: Array,
      default: () => []
    },
    innerData: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss" scoped>
.pie-container {
  box-shadow: 5px 5px 6px #ccc;
  border-radius: 5px;
}
</style>